<!--
=========================================================
 Material Dashboard - v2.1.1
=========================================================

 Product Page: https://www.creative-tim.com/product/material-dashboard
 Copyright 2019 Creative Tim (https://www.creative-tim.com)
 Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)

 Coded by Creative Tim

=========================================================

 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
  <div class="container">
    <span class="skiplink-text">Skip to main content</span>
  </div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
  <a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
    品目ダッシュボード
  </a>
  <ul class="navbar-nav flex-row d-none d-md-flex">
    <!-- <li class="nav-item">
      <a class="nav-link p-2" href="#version">
        2.1.1
      </a>
    </li> -->
    <li class="nav-item dropdown">
      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        v2.1.1
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
        <a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
        <a class="dropdown-item" href="../../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
        <a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
          <title>GitHub</title>
          <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
        </svg>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
        <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
          <title>Twitter</title>
          <path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
        </svg>
      </a>
    </li>
  </ul>
  <div class="navbar-nav-scroll ml-md-auto ">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item">
        <a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> プロ仕様にアップグレードする </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://demos.creative-tim.com/material-dashboard/examples/dashboard.html"><i class="material-icons">view_carousel</i> ライブプレビュー</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i>
          星を手伝う
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
          <i class="material-icons">translate </i>
          日本人
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active  dropdown-flag-holder" href="#">
            日本人
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
          </a>
          <a class="dropdown-item dropdown-flag-holder" href="../../../../zh/docs/2.1/getting-started/introduction.html">中文
          </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="" target="_blank" rel="noopener"></a>
      </li>
    </ul>
  </div>
  <a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
    <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }
  </style>
</header>
<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            入門
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/introduction.html">
                前書き
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/license.html">
                ライセンス
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/file-structure.html">
                ファイル構造
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/getting-started/build-tools.html">
                ビルドツール
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            コンポーネント
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/components/alerts.html">
                アラート
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/badge.html">
                バッジ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/breadcrumb.html">
                ブレッドクラム
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/buttons.html">
                ボタン
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/card.html">
                カード
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/carousel.html">
                カルーセル
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/collapse.html">
                崩壊
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/dropdowns.html">
                ドロップダウン
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/forms.html">
                フォーム
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/google-maps.html">
                グーグルマップ
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/info-areas.html">
                情報エリア
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/material-icons.html">
                素材のアイコン
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/modal.html">
                モーダル
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/navs.html">
                ナビ
              </a>
            </li>
            <li class="active bd-sidenav-active">
              <a href="../../../../ja/docs/2.1/components/navbar.html">
                ナビバー
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/pagination.html">
                ページ付け
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/parallax.html">
                視差
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/popovers.html">
                ポップオーバー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/progress.html">
                進捗
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/tables.html">
                テーブル
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/tooltips.html">
                ツールチップ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/components/typography.html">
                タイポグラフィ
              </a>
            </li>
          </ul>
        </div>
        <div class="bd-toc-item active">
          <a class="bd-toc-link" href="#docs">
            プラグイン
          </a>
          <ul class="nav bd-sidenav">
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/bootstrap-notify.html">
                ブートストラップ通知
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/perfect-scrollbar.html">
                完璧なスクロールバー
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/bootstrap-switch.html">
                ブートストラップスイッチ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/datetimepicker.html">
                日時ピッカー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/fullcalendar.html">
                フルカレンダー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jvector-map.html">
                jベクトルマップ
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/sweet-alert-2.html">
                スウィートアラート
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jquery-validation.html">
                JQuery 検証as
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/fileupload-jasny.html">
                ファイルのアップロードJasny
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/jquery-tagsinput.html">
                jQueryのタグ入力
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/select-bootstrap.html">
                ブートストラップを選択
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
            <li class="">
              <a href="../../../../ja/docs/2.1/plugins/sliders.html">
                スライダー
                <span class="badge badge-primary">プロ</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="d-none d-xl-block col-xl-2 bd-toc">
      <ul class="section-nav">
        <li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#ナビ">ナビ</a></li>
            <li class="toc-entry toc-h3"><a href="#フォーム">フォーム</a></li>
            <li class="toc-entry toc-h3"><a href="#テキスト">テキスト</a></li>
          </ul>
        </li>
        <li class="toc-entry toc-h2"><a href="#配色">配色</a></li>
        <li class="toc-entry toc-h2"><a href="#コンテナ">コンテナ</a></li>
        <li class="toc-entry toc-h2"><a href="#配置">配置</a></li>
        <li class="toc-entry toc-h2"><a href="#反応行動">反応行動</a>
          <ul>
            <li class="toc-entry toc-h3"><a href="#トグラー">トグラー</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
      <div class="row mt-4">
        <a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/ja/docs/2.1/components/navbar.html" target="_blank">編集 Github</a>
      </div>
      <h1 class="bd-title" id="content">
        Navbar
      </h1>
      <p class="bd-lead">Bootstrapのパワフルでレスポンシブなナビゲーションヘッダ、navbarのドキュメントと例。当社の折りたたみプラグインのサポートを含む、ブランディング、ナビゲーションなどのサポートが含まれています。</p>
      <h2 id="how-it-works">How it works</h2>
      <p>ナビゲーションバーを使い始める前に、次のことを知っておく必要があります。:</p>
      <ul>
        <li>Navbarsはレスポンシブ折りたたみと[配色]（＃color-scheme）クラスのために <code class="highlighter-rouge">.navbar</code>を<code class="highlighter-rouge"> .navbar-expand {-sm | -md | -lg | -xl} </code>でラップする必要があります。</li>
        <li>Navbarsとその内容はデフォルトでは流動的です。横幅を制限するには、[optionalコンテナ]（＃コンテナ）を使用します。</li>
        <li>[spacing]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / spacing /）と[flex]（{{site.baseurl}} / docs / {{site.docs_version）を使用してください。ナビゲーションバー内の間隔と配置を制御するためのユーティリティクラス。</li>
  <li>Navbarsはデフォルトで反応しますが、それを変更するために簡単に修正することができます。レスポンシブな動作は、Collapse JavaScriptプラグインによって異なります。</li>
  <li>印刷時にナビゲーションバーはデフォルトで非表示になります。 <code class="highlighter-rouge">.navbar</code>に<code class="highlighter-rouge"> .d-print</code>を追加してそれらを強制的に印刷させます。 [display]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / display /）ユーティリティクラスを参照してください。</li>
        <li>`&lt;nav&gt;<code class="highlighter-rouge">要素を使用してアクセシビリティを確保するか、 </code>&lt;div&gt;<code class="highlighter-rouge">のようなより一般的な要素を使用する場合は、すべてのナビゲーションバーに </code>role =” navigation “を追加して明示的にランドマーク領域として識別します。支援技術のユーザー。</li>
      </ul>
      <p>サポートされているサブコンポーネントの例とリストをお読みください。</p>
      <h3 id="ナビ">ナビ</h3>
      <p>Navbarのナビゲーションリンクは、独自の修飾子クラスを持つ <code class="highlighter-rouge">.nav</code>オプションを基にしており、適切なレスポンシブスタイルのために[toggler classes]（＃toggler）の使用を必要とします。ナビゲーションバーのナビゲーションも、ナビバーのコンテンツを安全に整列させるために、可能な限り多くの水平方向のスペースを占めるように拡張されます。</p>
      <p>現在のページを直接 <code class="highlighter-rouge">.nav-link</code>またはその直近の親<code class="highlighter-rouge"> .nav-item</code>に適用することができることを示すために、 <code class="highlighter-rouge">.active</code>でアクティブ状態を指定します。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">無効</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ナビバー<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarNav"</span> <span class="na">aria-controls=</span><span class="s">"navbarNav"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNav"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>特徴<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>価格設定<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>無効<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <p>ナビゲーションバーでドロップダウンを利用することもできます。ドロップダウンメニューは配置のための折り返し要素を必要とします、それで以下に示されるように <code class="highlighter-rouge">.nav-item</code>と<code class="highlighter-rouge"> .nav-link</code>のために別々のネストされた要素を使うことを忘れないでください。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    ドロップダウンリンク
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">アクション</a>
                    <a class="dropdown-item" href="#">もう一つの行動</a>
                    <a class="dropdown-item" href="#">他に何か</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ナビバー<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarNavDropdown"</span> <span class="na">aria-controls=</span><span class="s">"navbarNavDropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNavDropdown"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>特徴<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>価格設定<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
    ドロップダウンリンク
          <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdownMenuLink"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>アクション<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>もう一つの行動<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>他に何か<span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h3 id="フォーム">フォーム</h3>
      <p>`.form-inline`を使って様々なフォームコントロールやコンポーネントをナビゲーションバー内に配置します。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <div class="navbar-translate">
              <a class="navbar-brand" href="/presentation.html">ブランド</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a href="#pablo" class="nav-link">link</a>
                </li>
                <li class="nav-item">
                  <a href="#pablo" class="nav-link">link</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-just-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"navbar-translate"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"/presentation.html"</span><span class="nt">&gt;</span>ブランド<span class="nt">&lt;/a&gt;</span>
            <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">&gt;&lt;/span&gt;</span>
            <span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/div&gt;</span>

        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"nav-link"</span><span class="nt">&gt;</span>link<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;/li&gt;</span>
                <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
                    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"nav-link"</span><span class="nt">&gt;</span>link<span class="nt">&lt;/a&gt;</span>
                <span class="nt">&lt;/li&gt;</span>
            <span class="nt">&lt;/ul&gt;</span>

            <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
                <span class="nt">&lt;/div&gt;</span>
                <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-round"</span><span class="nt">&gt;</span>
                  <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>search<span class="nt">&lt;/i&gt;</span>
                <span class="nt">&lt;/button&gt;</span>
            <span class="nt">&lt;/form&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h3 id="テキスト">テキスト</h3>
      <p>ナビゲーションバーは <code class="highlighter-rouge">.navbar-text</code>の助けを借りてテキストのビットを含むことができます。このクラスは、テキスト文字列の垂直方向の配置と水平方向の間隔を調整します。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-dark bg-primary">
          <div class="container">
            <span class="navbar-text">
              インライン要素内
            </span>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-dark bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">&gt;</span>
      インライン要素内
    <span class="nt">&lt;/span&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">テキスト付きのナビゲーションバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
              </ul>
              <span class="navbar-text">
                Navbar text with an inline element
              </span>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>テキスト付きのナビゲーションバー<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarText"</span> <span class="na">aria-controls=</span><span class="s">"navbarText"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarText"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>特徴<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>価格設定<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">&gt;</span>
        Navbar text with an inline element
      <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h2 id="配色">配色</h2>
      <p>テーマクラスと <code class="highlighter-rouge">background-color</code>ユーティリティの組み合わせのおかげで、ナビゲーションバーのテーマ設定はこれまでになく簡単になりました。明るい背景色で使う場合は <code class="highlighter-rouge">.navbar-light</code>、暗い背景色で使う場合は<code class="highlighter-rouge"> .navbar-dark</code>から選択してください。それから、 <code class="highlighter-rouge">.bg- *</code>ユーティリティでカスタマイズしてください。</p>
      <div class="bd-example">
        <nav class="navbar navbar-expand-lg bg-dark">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-success">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor02">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-success">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-danger">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor03">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-danger">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-warning">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor04" aria-controls="navbarColor04" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor04">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-warning">
                  <i class="material-icons">サーチ</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-white">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor05" aria-controls="navbarColor05" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor05">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-white">
                  <i class="material-icons">サーチ</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor06" aria-controls="navbarColor06" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor06">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-primary">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-info">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor07" aria-controls="navbarColor07" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor07">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">特徴</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">価格設定</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">約</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round btn-info">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
      <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-dark"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-success"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-danger"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-warning"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-white"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span>

<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-info"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Navbar content --&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </figure>
      <h2 id="コンテナ">コンテナ</h2>
      <p>コンテナがあなたのナビゲーションバー内にあるとき、その水平方向のパディングはあなたが指定した <code class="highlighter-rouge">.navbar-expand {-sm | -md | -lg | -xl}</code>クラスより低いブレークポイントで取り除かれます。これにより、ナビゲーションバーが折りたたまれたときに、下部のビューポートで不必要にパディングが2倍になることはありません。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg navbar-light bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-light bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ナビバー<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h2 id="配置">配置</h2>
      <p>ナビゲーションバーを静的でない位置に配置するには、[position utilities]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / position /）を使用します。一番上に固定、一番下に固定、一番上に貼り付けるのいずれかを選択します（ページに移動して一番上に来るまでスクロールし、そこに留まる）。固定ナビゲーションバーは <code class="highlighter-rouge">position：fixed</code>を使用します。これはDOMの通常の流れから引っ張られ、他の要素と重ならないようにカスタムCSS（例えば<code class="highlighter-rouge"> &lt;body&gt; </code>の<code class="highlighter-rouge"> padding-top</code>）を必要とする場合があることを意味します。</p>
      <p>\また** <code class="highlighter-rouge">.sticky-top</code>は<code class="highlighter-rouge"> position：sticky</code>を使用しています、これは[すべてのブラウザで完全にサポートされているわけではない]（https://caniuse.com/#feat=css-sticky）**。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-light bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">デフォルト</a>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>デフォルト<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <nav class="navbar fixed-top navbar-light bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">一定 上</a>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar fixed-top navbar-light bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>一定 上<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <nav class="navbar fixed-bottom navbar-light bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">一定 底</a>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar fixed-bottom navbar-light bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>一定 底<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <div class="bd-example" data-example-id="">
        <nav class="navbar sticky-top navbar-light bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ねばねば 上</a>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar sticky-top navbar-light bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ねばねば 上<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <h2 id="反応行動">反応行動</h2>
      <p>ナビゲーションバーは <code class="highlighter-rouge">.navbar-toggler</code>、<code class="highlighter-rouge"> .navbar-collapse</code>、 <code class="highlighter-rouge">.navbar-expand {-sm | -md | -lg | -xl}</code>クラスを利用して、ボタンの後ろでコンテンツが折りたたまれたときに変更することができます。他のユーティリティと組み合わせて、特定の要素を表示または非表示にするタイミングを簡単に選択できます。</p>
      <h3 id="トグラー">トグラー</h3>
      <p>Navbarのトグラーはデフォルトで左寄せになっていますが、 <code class="highlighter-rouge">.navbar-brand</code>のような兄弟要素に従うと、自動的に右端に並びます。マークアップを元に戻すと、トグラーの配置が逆になります。以下はさまざまなトグルスタイルの例です。</p>
      <p>一番下のブレークポイントに <code class="highlighter-rouge">.navbar-brand</code>が表示されていない場合</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
              <a class="navbar-brand" href="#">隠された ブランド</a>
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">リンク</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">無効</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group has-white">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round">
                  <i class="material-icons">サーチ</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo01"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo01"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo01"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>隠された ブランド<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>リンク<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>無効<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group has-white"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-neutral btn-icon btn-round"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>サーチ<span class="nt">&lt;/i&gt;</span>
          <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/form&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <p>左側にブランド名、右側にトグラーが表示されます。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <a class="navbar-brand" href="#">ナビバー</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">リンク</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ナビバー<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo02"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo02"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo02"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>リンク<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-neutral btn-icon btn-round"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>search<span class="nt">&lt;/i&gt;</span>
          <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/form&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
      <!-- With a toggler on the left and brand name on the right: -->
      <p>左側にトグル、右側にブランド名があります。</p>
      <div class="bd-example" data-example-id="">
        <nav class="navbar navbar-expand-lg bg-primary">
          <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
              <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <a class="navbar-brand" href="#">ナビバー</a>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
              <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                  <a class="nav-link" href="#">ホーム <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">リンク</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">無効</a>
                </li>
              </ul>
              <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-neutral btn-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
      <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbarTogglerDemo03"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo03"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ナビバー<span class="nt">&lt;/a&gt;</span>

    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo03"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>ホーム <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>(current)<span class="nt">&lt;/span&gt;&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>リンク<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>無効<span class="nt">&lt;/a&gt;</span>
        <span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
      <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-neutral btn-icon btn-round"</span><span class="nt">&gt;</span>
              <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>search<span class="nt">&lt;/i&gt;</span>
          <span class="nt">&lt;/button&gt;</span>
      <span class="nt">&lt;/form&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre>
      </div>
    </main>
  </div>
</div>